<template>
	<view>
		<uamhead :title="title"></uamhead>
		<scroll-view scroll-y="true">
		<section title="基本用法" type="line">
			<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @input="handleToSuggest" @tap="handleToClose">
			</uni-search-bar>
		</section>		
		<block v-if="searchType == 1">
		<view class="search-history">
			<view class="search-history-head">
				<span>历史记录</span>
				<text class="iconfont iconlajitong" @tap="handleToClear"></text>
			</view>
			<!-- 显示搜索保存的数据 -->
			<view class="search-history-list">
				<view v-for="(item,index) in historyList" :key="index" @tap="handleToWord(item)">
					<text>{{ item }}</text>
				</view>
			</view>
		</view>
		<!-- 显示热歌榜 -->
		<view  class="search-hot-title">热歌榜：</view>
		<view class="search-list">
			<view class="search-hot-item" v-for="(item,index) in searchword" :key="index"  @tap="handleToWord(item.searchWord)">
			<view class="search-hot-top" v-if="index<3">{{ index + 1 }}</view>
			<view class="search-hot-top1" v-else>{{ index + 1 }}</view>
				<view class="search-hot-word">
					<view>
						{{ item.searchWord }} <image :src="item.iconType ? item.iconUrl : ''" mode="aspectFit"></image>
					</view>
				<view>{{ item.content }}</view>
			</view>
			<text class="search-hot-count">{{ item.score }}</text>
			</view>
		</view>
		</block>
		<block v-else-if="searchType == 3">
		<!-- 搜索列表 -->
		<view class="search-suggest">
			<view class="search-suggest-title">搜索"{{ this.searchValue }}"</view>
			<view  class="search-suggest-item" v-for="(item,index) in suggestList" :key="index"
				@tap="handleToWord(item.keyword)">
				<text class="iconfont iconsearch"></text>
				{{ item.keyword }}
			</view>
		</view>
		</block>
		<block v-else-if="searchType == 2">
		<!-- 搜索出来的结果 -->
		<view class="search-result-item" v-for="(item,index) in searchList" :key="index" @tap="handleToDetail(item.id)">
			<view class="search-result-word">
				<view>{{ item.name }}</view>
				<view>{{ item.artists[0].name }} - {{ item.album.name }}</view>
			</view>
			<text class="iconfont iconbofang"></text>
		</view>
		</block>
	</scroll-view>
	</view>


</template>

<script>
	import '../../common/iconfont.css'
	import {
		searchHot,
		searchWord,
		searchSuggest
	} from "../../common/api.js"
	export default {
		data() {
			return {
				title:"搜索",
				searchValue: '',
				searchword: [],
				historyList: [],
				suggestList: [],
				searchList: [],
				searchType:1,
			}
		},
		onLoad() {
			searchHot().then(res => {
				this.searchword = res.data.data
				console.log(res)
			})
			searchWord().then(res => {
				console.log(res)
			})
			searchSuggest().then(res => {
				console.log(res)
			})
			//getStorage从本地缓存中异步获取指定 key 对应的内容
			uni.getStorage({
				key: 'searchHistory',
				success: (res) => {
					this.historyList = res.data
				}
			})
		},

		methods: {
			//获取数据
			search(res) {
				this.historyList.unshift(this.searchValue);
				this.historyList = [...new Set(this.historyList)];
				//setStorage将数据存储在本地缓存中指定的 key 中
				uni.setStorage({
					key: 'searchHistory',
					data: this.historyList
				})
				this.getSearchList(this.searchValue)
			},
			//移除搜索历史，本地key
			handleToClear() {
				uni.removeStorage({
					key: 'searchHistory',
					success: () => {
						this.historyList = []
					}
				})
			},
			handleToWord(word) {
				this.searchValue = word;
				this.search();
			},
			//搜索列表
			handleToSuggest(e) {
				let value = e;
				if (this.searchValue == "") {
					this.suggestList = []
					this.searchType=1

				} else {
					searchSuggest(value).then(res => {
						this.searchType = 3;
						this.suggestList = res.data.result.allMatch
					
						console.log(res)
					})
				}

			},
			getSearchList(word) {
				searchWord(word).then((res) => {
					this.searchType = 2;
					this.searchList = res.data.result.songs;
				});
			},
			handleToDetail(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/player/player?playerid=' + id
				});
			},
			onBackPress() {
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord();
				// #endif
			},
			handleToClose() {
				this.searchWord = ''
			
			},

		},

	}
</script>

<style scoped>
	/* .search-search{
		display: flex;
		align-items: center;
		height: 70rpx;
		margin: 70rpx 30rpx 30rpx 30rpx;
		background: #f7f7f7;
		border-radius: 50rpx;
	}
	.s-search text{
		font-size: 26rpx;
		margin-right: 26rpx;
		margin-left: 28rpx;
	}
	.search-search input{
		font-size: 28rpx;
		flex: 1;
	} */
	.search-history{ 
		margin:0 30rpx; 
		font-size:26rpx;
	}
	.search-history-head{ 
		display: flex; 
		justify-content: space-between;
	}
	.search-history-list{ 
		display: flex; 
		margin-top:36rpx; 
		flex-wrap: wrap;
	}
	.search-history-list view{ 
		padding:20rpx 40rpx; 
		background:#f7f7f7; 
		border-radius: 50rpx; 
		margin-right:30rpx; 
		margin-bottom: 20rpx;
	}
	.search-hot{
		margin: 0 30rpx;
		font-size: 200rpx;
		border-radius: 20rpx;
	}
	.search-hot-head{
		
	}
	.search-hot-item{
		display: flex; 
		align-items: center; 
		margin-top: 40rpx;
	}
	.search-hot-top{
		color: #ff0000;
		width: 60rpx;
		margin-left: 8rpx;
	}
	.search-hot-top1{
		color: #000000;
		width: 60rpx;
		margin-left: 8rpx;
	}
	.search-hot-word{
		flex: 1;
	}
	.search-hot-word view:nth-child(1){
		font-size:36rpx;
		color:black;
	}
	.search-hot-word image{
		width:48rpx; 
		height:22rpx;
	}
	.search-hot-count{
		font-size: 10rpx;
	}
	.search-result{ 
		border-top: 2rpx #e5e5e5 solid; 
		padding:30rpx;
	}
	.search-result-item{ 
		display: flex; 
		align-items: center; 
		border-bottom: 2rpx #e5e5e5 solid; 
		padding-bottom:30rpx; 
		margin-bottom: 30rpx;
	}
	.search-result-item text{ 
		font-size:50rpx;
	}
	.search-result-word{ 
		flex:1;
	}
	.search-result-word view:nth-child(1){ 
		font-size:28rpx; 
		color:#3e6694;
	}
	.search-result-word view:nth-child(2){ 
		font-size:26rpx;
	}
	
	.search-suggest{ 
		border-top: 2rpx #e5e5e5 solid; 
		padding:30rpx; 
		font-size:26rpx; 
	}
	.search-suggest-title{ 
		color:#537caa; 
		margin-bottom: 40rpx;
	}
	.search-suggest-item{ 
		color:#666666; 
		margin-bottom: 70rpx;
	}
	.search-suggest-item text{ 
		color:#c2c2c2; 
		font-size:26rpx; 
		margin-right:26rpx;
	}
</style>

